* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    /* height: 700px; */
}

body {
    /* 注意这里的高度百分的设置
    普通的盒子 在没有设置宽高 设置背景图没有效果
    */
    height: 100%;
    background: url(../image1/f1_1.jpg) no-repeat center 0;

    /* 缩放背景图 */

    /* 图片等比例缩放, 当宽度或高度和盒子尺寸相等, 图片就不再缩放 */
    /* background-size: contain; */

    /* 图片等比例缩放, 图片完全覆盖到整个盒子, 可能会导致图片显示不全 */
    /* background-size: cover; */
    position: relative;
}

.cloud img:nth-of-type(1) {
    position: absolute;
    top: 20px;
    left: 600px;
    animation: dong 1s infinite alternate;

}

.cloud img:nth-of-type(2) {
    position: absolute;
    top: 70px;
    left: 1050px;
    animation: dong 2s infinite alternate .2s linear;
}

.cloud img:nth-of-type(3) {
    position: absolute;
    top: 150px;
    left: 335px;
    animation: dong 1s infinite alternate .4s;
}

/* 云彩动画 */
@keyframes dong {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(40px);
    }
}
/* 足够大的盒子。 */
.price {
    width: 800px;
    height: 700px;
    /* 下面的定位一下 */
    position: relative;
}

.price img {
    height: 100px;
}

.price img:nth-of-type(1) {
    position: absolute;
    bottom: 60px;
    left: 466px;
    animation: dong2 1s infinite alternate .1s;
}

.price img:nth-of-type(2) {
    position: absolute;
    bottom: 60px;
    left: 615px;
    animation: dong2 1s infinite alternate .5s;
}

.price img:nth-of-type(3) {
    position: absolute;
    bottom: 60px;
    left: 766px;
    animation: dong2 1s infinite alternate .3s;
}

.price img:nth-of-type(4) {
    position: absolute;
    bottom: 60px;
    left: 900px;
    animation: dong2 1s infinite alternate .5s;
}

/* 下面的动画 */
@keyframes dong2 {
    form {
        transform: translateX(0);
    }

    to {
        transform: translateY(-20px);
    }
}

/* 中间的字 */
.font img {
    width: 500px;
}

.font {
    position: absolute;
    top: 200px;
    left: 500px;
}

.san img {
    width: 100px;
}

.san {
    position: absolute;
    top: 60px;
    left: 455px;
    animation: dong3 1s infinite alternate .5s;
}

@keyframes dong3 {
    to {
        transform: translateY(-20px);
    }
}

.lu img {
    width: 160px;
}

.lu {
    position: absolute;
    top: 100px;
    left: 850px;
}